<template>
  <div class="container">
    <el-dialog
      :visible.sync="isShowDialog"
      width="800px"
      :modal="false"
      :close-on-click-modal="false"
      class="thisblack-bgc"
    >
      <span slot="title">
        <p class="head-title">设置展位简称</p>
        <p class="head-tip">展位简称用于展位宣传，可与营业执照名称不同，名称请遵守相关法律法规</p>
      </span>
      <div class="contentWarning">
        <p class="warningP">一、展位简称不得包含以下信息：</p>
        <p class="warningP line2">1、违反相关法律法规要求的；</p>
        <p class="warningP line2">2、涉嫌侵犯他人权利的；</p>
        <p class="warningP line2">3、涉嫌虚假宣传、含有不真实内容的；</p>
        <p class="warningP line2">4、易造成混淆、误认的；</p>
        <p class="warningP line2">5、有违公序良俗的不良信息；</p>
        <p class="warningP line2">6、干扰本网运营秩序的信息；</p>
        <p class="warningP line2">7、其他不适合出现的信息，特别是宣传语或促销名词（独家、最、第一等互联网法禁止用于宣传的用词）。</p>
        <p class="warningP">二、如展位简称包含以上信息的，商家可向本网申请予以调整。同时，为了防止对公众造成不利影响，本网也可基于自身判断进行调整，采取展位简称恢复与营业执照公司名称一致措施。</p>
        <p class="warningP">三、厂商可对展位简称的修改，近365天内仅修改一次，更改名称时需提供展位简称与企业相关性的证明。</p>
        <el-link id="download" class="warningLink" type="primary" :underline="false" @click="download">下载《展位更名申请书》模板<i class="el-icon-download" /></el-link>
      </div>
      <div class="contentForm">
        <el-form ref="ruleForm" label-width="90px" label-position="left" :model="ruleForm" :rules="rules">
          <el-form-item label="展位简称" prop="newImcom">
            <el-input
              v-model="ruleForm.newImcom"
              class="w500"
              placeholder="最多8个汉字，支持英文及符号"
              maxlength="8"
              show-word-limit
            />
          </el-form-item>
          <el-form-item prop="applicationUrl">
            <!-- 配合ruleForm校验 -->
            <el-select v-model="ruleForm.applicationUrl[0]" style="display: none !important" />
            <div v-if="ruleForm.applicationUrl" class="flex">
              <el-link type="primary" class="w400" :underline="false" style="display: inline-block;">展位更名申请书</el-link>
              <el-link type="primary" class="ml16 mr16 uploadLink" :href="`https://img1.17img.cn/17img/${ruleForm.applicationUrl}`" target="_blank" :underline="false">下载</el-link>
              <el-link type="primary ml16" :underline="false" @click="deleteProve()">删除</el-link>
            </div>
            <el-upload
              ref="imLiteratureUpload"
              class="upload-demo"
              action="/api/b2b/common-api/file/upload/document"
              :on-success="imLiteratureSuccess"
              :before-upload="beforeImLiteratureUpload"
              :limit="1"
              accept=".pdf,.docx,.doc,.jpg,.png,.jpeg"
              :show-file-list="false"
            >
              <el-button v-if="!ruleForm.applicationUrl" v-loading="isUpload">上传《展位更名申请书》</el-button>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import axios from 'axios'
import api from '@/api'
import { getUsername, getMobile, getImListId } from '@/utils/auth'
export default {
  name: 'SuperAdmin',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    boothname: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data () {
    return {
      isUpload: false,
      loading: false,
      ruleForm: {
        // imcomAbb: '',
        applicantPerson: getUsername(), // 申请人
        applicantPhone: getMobile(), // 申请人电话
        newImcom: '', // 修改后展位简称
        applicationUrl: '' // 更新申请书url
      },
      rules: {
        // imcomAbb: [
        //   { required: true, message: '请输入展位简称', trigger: 'blur' },
        //   { min: 0, max: 8, message: '长度在 0 到 8 个字符', trigger: 'blur' }
        // ]
        newImcom: [{ required: true, message: '请输入展位简称', trigger: 'blur' }, { min: 0, max: 8, message: '长度在 0 到 8 个字符', trigger: 'blur' }],
        applicationUrl: [{ required: true, message: '请上传《展位更名申请书》', trigger: 'change' }]
      }
    }
  },
  computed: {
    isShowDialog: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('closeEvents', 'isBoothAbbreviation', val)
      }
    }
  },
  created () {
    this.getCompanyListByUser()
  },
  methods: {
    closeDialog () {
      this.$emit('closeEvents', 'isBoothAbbreviation', false)
    },
    submitForm (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          await api.imlist.updateImcomAbb(this.ruleForm)
          this.$emit('closeEvents', 'isBoothAbbreviation', false)
          this.$message({ message: '设置成功', type: 'success' })
        } else {
          return false
        }
      })
    },
    imLiteratureSuccess (res, file) {
      this.ruleForm.applicationUrl = res.data
      this.isUpload = false
      this.$refs.imLiteratureUpload.clearFiles()
    },
    beforeImLiteratureUpload (file) {
      this.isUpload = true
      const isLt2M = file.size / 1024 / 1024 < 20
      if (!isLt2M) {
        this.$message.error('上传文件大小不能超过 20MB!')
      }
      return isLt2M
    },
    deleteProve () {
      this.ruleForm.applicationUrl = ''
    },
    download () {
      axios.get('/static/file/boothNameAddSpecification.docx', { // 静态资源文件夹public
        responseType: 'blob'
      }).then(response => {
        const url = window.URL.createObjectURL(new Blob([response.data]))
        const link = document.createElement('a')
        const fname = '展位更名申请书.docx'
        link.href = url
        link.setAttribute('download', fname)
        document.body.appendChild(link)
        link.click()
      }).catch(error => {
        // console.log('error:' + JSON.stringify(error))
      })
    },
    async getCompanyListByUser () {
      const params = {
        imListId: getImListId()
      }
      const { data } = await api.imlist.companyInfo(params)
      this.ruleForm.newImcom = data.imComAbb
    }
  }
}
</script>
<style lang="scss" scoped>
  .container {
    .thisblack-bgc {
      background: rgba(0,0,0,.5);
    }
    ::v-deep .el-dialog {
      .el-dialog__header {
        padding: 12px 16px;
        background: #F5F8FC;
        .head-title {
          font-size: 16px;
          color: #202933;
          font-weight: 500;
          line-height: 1.5;
        }
        .head-tip {
          font-size: 14px;
          color: #B9C0C7;
          font-weight: 400;
          line-height: 1.5;
          a{
            cursor: pointer;
            color: #0C7FF2;
          }
        }
      }
      .el-dialog__body {
        padding: 32px;
        .contentWarning {
          width: 100%;
          padding: 15px;
          box-sizing: border-box;
          border: 1px solid #F0AD00;
          border-radius: 2px;
          background-color: #FEFBF3;
          .warningP {
            color: #4F5862;
            font-size: 12px;
            font-weight: 400;
            line-height: 1.5;
            &.line2 {
              text-indent: 2em;
            }
          }
          .warningLink {
            font-size: 12px;
            line-height: 1;
            margin-top: 8px;
            font-weight: 400;
          }
        }
        .contentForm {
          margin: 25px auto;
          .el-button {
            color: #4F5862;
            font-size: 14px;
            font-weight: 400;
            &:hover, &:active, &:focus {
              color: #409eff;
            }
          }
          .uploadLink {
            line-height: 1.2;
            font-weight: 400;
          }
        }
      }
      .el-dialog__footer {
        padding: 24px 0;
        text-align: center;
        border-top: 1px solid #E5EAF0;
      }
    }
  }
</style>
